https://jsfiddle.net/

###Example_no_div

<!DOCTYPE html>
<html lang="ko"><!-- HTML 문서의 시작과 언어를 한국어로 설정 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 화면 크기에 따라 페이지를 적절히 표시 설정 -->
    <title>코딩과 논리적사고 웹기초</title> <!-- 브라우저 탭에 표시 -->
</head>
<body>
    <!-- 제목 섹션 -->
    <h1>Python/Pandas/HTML 기초수업</h1><!-- 첫 번째 크기의 제목 -->
    <h2>수업 사이트 방문을 환영합니다</h2><!-- 두 번째 크기의 제목 -->

    <!-- 교수 정보 섹션 -->
    <p>Professor: 이두황</p>

     <!-- 학생 정보 섹션 -->
    <h2>수강생 리스트</h2>
    <ul> <!-- 비순서형 목록 -->
        <li>하니</li>
        <li>해린</li>
        <li>민지</li>
        <li>혜인</li>
        <li>다니엘</li>
    </ul>

    <!-- 학습 목록 섹션 -->
    <h2>학습 토픽 리스트</h2>
    <ol> <!-- 순서형 목록 -->
        <li>Python 기초</li>
        <li>Pandas 기초</li>
        <li>HTML 기초</li>
    </ol>

    <!-- 링크 섹션 -->
    <h2>유용한 사이트</h2>
    <p>상세한 학습 정보를 원한다면 아래의 웹사이트를 방문하세요</p>
    <ul>
        <li><a href="https://python.org" target="_blank">Python 공식 사이트</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">HTML 자료 사이트</a></li>
    </ul>
</body>
</html>



===============================

###Example_with_div

<!DOCTYPE html>
<html lang="ko"> <!-- HTML 문서의 시작과 언어를 한국어로 설정 -->
<head> <!--HTML 문서의 메타데이터(제목, 스타일 등)를 정의-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 화면 크기에 따라 페이지를 적절히 표시 설정 -->
    <title>코딩과 논리적사고 웹기초</title> <!-- 브라우저 탭에 표시 -->
</head>
<body>
    <!-- 제목 섹션 -->
    <div>
        <h1>Python/Pandas/HTML 기초수업</h1>
        <h2>수업 사이트 방문을 환영합니다</h2>
    </div>

    <!-- 교수 정보 섹션 -->
    <div>
        <p>Professor: 이두황</p>
    </div>

    <!-- 학생 정보 섹션 -->
    <div>
        <h2>수강생 리스트</h2>
        <ul> <!-- 비순서형 목록 -->
            <li>하니</li>
            <li>해린</li>
            <li>민지</li>
            <li>혜인</li>
            <li>다니엘</li>
        </ul>
    </div>

    <!-- 학습 목록 섹션 -->
    <div>
        <h2>학습 토픽 리스트</h2>
        <ol> <!-- 순서형 목록 -->
            <li>Python 기초</li>
            <li>Pandas 기초</li>
            <li>HTML 기초</li>
        </ol>
    </div>

    <!-- 링크 섹션 -->
    <div>
        <h2>유용한 사이트</h2>
        <p>상세한 학습 정보를 원한다면 아래의 웹사이트를 방문하세요</p>
        <ul>
            <li><a href="https://python.org" target="_blank">Python 공식 사이트</a></li>
            <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">HTML 자료 사이트</a></li>
        </ul>
    </div>
</body>
</html>



===============================

###Example_with_div_css

<!DOCTYPE html>
<html lang="ko"> <!-- HTML 문서의 시작과 언어를 한국어로 설정 -->
<head> <!--HTML 문서의 메타데이터(제목, 스타일 등)를 정의-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 화면 크기에 따라 페이지를 적절히 표시 설정 -->
    <title>코딩과 논리적사고 웹기초</title><!-- 브라우저 탭에 표시 -->
    <style> 
	/* CSS 정의 */
         #python {
            color: red;
            font-size: 24px;
            text-align: center;
            margin: 0 auto;  /* 가로 중앙 정렬 */
            display: block;   /* 블록 요소로 변경 */
            width: fit-content; /* 너비를 내용에 맞춤 */
            margin-top: 20px; /* 상단 여백 추가 */
        }
        .student_name { color: green; text-decoration: underline; }
        .professor_name { color: blue; font-weight: bold; }
        p { font-style: italic; line-height: 1.5; }
        a { color: orange; text-decoration: none; }
        ul { list-style-type: disc; }
        ol { list-style-type: decimal; }
        .section { margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <!-- 제목 섹션 -->
    <div id="header" class="section"> 
        <h1 id="python">Python/Pandas/HTML 기초수업</h1> 
        <h2>수업 사이트 방문을 환영합니다</h2><!-- 두 번째 크기의 제목 -->
    </div>

    <!-- 교수 정보 섹션 -->
    <div id="professor-info" class="section">
        <p class="professor_name">Professor: 이두황</p>
    </div>

    <!-- 학생 정보 섹션 -->
    <div id="student-info" class="section">
        <h2>수강생 리스트</h2>
        <ul>
            <li class="student_name">하니</li>
            <li class="student_name">해린</li>
            <li class="student_name">민지</li>
            <li class="student_name">혜인</li>
            <li class="student_name">다니엘</li>
        </ul>
    </div>

    <!-- 학습 목록 섹션 -->
    <div id="learning-topics" class="section">
        <h2>학습 토픽 리스트</h2>
        <ol>
            <li>Python 기초</li>
            <li>Pandas 기초 </li>
            <li>HTML 기초</li>
        </ol>
    </div>

    <!-- 링크 섹션 -->
    <div id="links" class="section">
        <h2>유용한 사이트</h2>
        <p>상세한 학습 정보를 원한다면 아래의 웹사이트를 방문하세요</p>
        <ul>
            <li><a href="https://python.org" target="_blank">Python 공식 사이트</a></li>
            <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">HTML 자료 사이트</a></li>
        </ul>
    </div>
</body> 
</html>